﻿<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="EmpAnalisisConsumos.aspx.cs" Inherits="EmpAnalisisConsumos" Title="Analisis de Consumos" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="Server">

    <script src="JS/jquery/js/highcharts.js" type="text/javascript"></script>
    <div id="asociaciones_empresa" style="height:400px; width: 49%; display:inline-block;"></div>
    <div id="desasociaciones_empresa" style="height:400px; width: 49%; display:inline-block;"></div>
    <hr />
    <div id="uso_publicaciones" style="height:400px;"></div>
    <hr />
    <div id="seguimiento_publicaciones" style="height:400px;"></div>
    <script type="text/javascript">
        var dataArray = [];
        var chartArray = [];
        
        Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function(color) {
		    return {
		        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
		        stops: [
		            [0, color],
		            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
		        ]
		    };
		});
        
        var colors = Highcharts.getOptions().colors
                
        <%= data %>
        
        $(document).ready(function() {
            goPlot();
        });
        
        function setChart(chart, name, categories, data, color) {
		    chart.xAxis[0].setCategories(categories);
		    chart.series[0].remove();
		    chart.addSeries({
			    name: name,
			    data: data,
			    color: color || 'white'
		    });
	    }
        
        function goPlot(){
            if(dataArray.length <= 0)
            {
                bind_ui(); // esto es para que rebindee los tooltips, impacta en otra cosa?
                return;
            }

                
            var item = dataArray.pop();
            
            if(item.type == 'pie')
                plot_pie(item);
            if(item.type == 'column')
                plot_column(item);
            
            setTimeout('goPlot()',1000);
        }  
        
        function plot_column(item){
            var chart;
            chart = new Highcharts.Chart({
                            credits: {
	                            enabled: 0
	                        },
		                    chart: {
			                    renderTo: item.container,
			                    type: 'column'
		                    },
		                    title: {
			                    text: item.title,
			                    useHTML: true
			                    
		                    },
		                    subtitle: {
			                    text: item.subtitle
		                    },
		                    xAxis: {
			                    categories: item.categories
		                    },
		                    yAxis: {
			                    title: {
				                    text: 'Casos'
			                    }
		                    },
		                    plotOptions: {
			                    column: {
				                    cursor: 'pointer',
				                    point: {
					                    events: {
						                    click: function() {
							                    var drilldown = this.drilldown;
							                    if (drilldown) { // drill down
								                    setChart(chart, drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
							                    } else { // restore
								                    setChart(chart, item.name, item.categories, item.data);
							                    }
						                    }
					                    }
				                    },
				                    dataLabels: {
					                    enabled: true,
					                    color: colors[0],
					                    style: {
						                    fontWeight: 'bold'
					                    },
					                    formatter: function() {
						                    return this.y;
					                    }
				                    }
			                    }
		                    },
		                    tooltip: {
			                    formatter: function() {
				                    var point = this.point,
					                    s = this.x +':<b>'+ this.y +'</b><br/>';
				                    if (point.drilldown) {
					                    s += 'Click para ver los detalles de '+ point.category;
				                    } else {
					                    s += 'Click para regresar';
				                    }
				                    return s;
			                    }
		                    },
		                    series: [{
			                    name: item.title,
			                    data: item.data,
			                    color: 'white'
		                    }],
		                    exporting: {
			                    enabled: false
		                    }
	                    });     
	        chartArray.push(chart);
        }
    
	    function plot_pie(item){
	        
            chart = new Highcharts.Chart({
	            credits: {
	                enabled: 0
	            },
		        chart: {
			        renderTo: item.container,
			        plotBackgroundColor: null,
			        plotBorderWidth: null,
			        plotShadow: false
		        },
		        title: {
			        text: item.title,
			        useHTML: true
		        },
		        tooltip: {
			        formatter: function() {
				        return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
			        }
		        },
		       plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true
                    }
                },
		        series: [{
			        type: 'pie',
			        name: item.title,
			        data: item.data
		        }]
	        });
	        
	        if(item.data.length <= 0)
	            chart.showLoading('No existen datos para mostrar');
	    }
	    
    </script>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="footer" runat="Server">
</asp:Content>
